<template>
  <div class="" v-loading="loading">
    <el-row class="content-head" style="width:100%">
      <el-col :span="24" class="content_title">
        <el-col :span="12">
          <HeadTitle></HeadTitle>
        </el-col>

      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="content_edit pd_20" style="padding-top:20px">
        <div id="diy-phone" style="margin-top:0">
          <div class="diy-phone-header">
            <i class="diy-phone-receiver"></i>
            <div class="diy-phone-title j-pagetitle"></div>
          </div>
          <div class="diy-phone-contain" id="j-materialPrev">
            <h3 class="news">{{ data.title }}</h3>
            <div class="newtime">
              <p>{{ newsName }}</p>
              <p v-if="data.created_time">
                {{ data.created_time | getMonthAndDay }}
              </p>
            </div>
            <div class="materialPrePanel mgt20">
              <div v-if="data.content">
                <div class="single-summary pd10" style="border:none;padding:5px 5px 0" v-html="data.content"></div>
                <div style="padding-left:5px;color:#666;margin-bottom: 10px;" v-if="data.editor">
                  责任编辑：{{ data.editor }}
                </div>
              </div>
            </div>
          </div>
          <i class="diy-phone-footer"></i>
        </div>
        <div class="relative f_l floatBox-width" style="margin-left: 25px;position: relative;width:60%">
          <div class="black">
            <div class="add_con_form">
              <el-form label-width="100px" label-position="left" :model="data">
                <el-form-item label="选择文章分类">
                  <el-col :span="10">
                    <el-select v-model="data.cate_id" placeholder="请选择" @change="handleItemChange">
                      <el-option v-for="item in options" :key="item.value" :label="item.title" :value="item.id"></el-option>
                    </el-select>
                  </el-col>
                </el-form-item>
                <el-form-item label="文章标题">
                  <el-col :span="24">
                    <el-input placeholder="请输入标题" v-model="data.title" clearable></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="文章副标题">
                  <el-col :span="24">
                    <el-input placeholder="请输入副标题" v-model="data.description" clearable></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="文章链接">
                  <el-col :span="24">
                    <el-input placeholder="请输入文章链接" v-model="data.link" clearable></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="文章来源">
                  <el-col :span="24">
                    <el-input placeholder="请输入文章来源" v-model="data.author" clearable></el-input>
                  </el-col>
                </el-form-item>
                <el-form-item label="浏览量">
                  <el-col :span="24">
                    <el-input placeholder="请输入浏览量" v-model="data.hit" clearable></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="责任编辑">
                  <el-col :span="24">
                    <el-input placeholder v-model="data.editor" clearable></el-input>
                  </el-col>
                </el-form-item>

                <el-form-item label="图片地址" prop="piclink">
                  <el-col :span="12" class="tl">
                    <el-input v-model="data.piclink" autocomplete="off"></el-input>
                    <uploadpic :piclink="data.piclink" :width="300" :height="175" :real_width="140" :real_height="90"
                      :is_more="false" @send_pic="onSuccess"></uploadpic>
                    <!-- <compressimgUpload :onSuccess="onSuccess"
                                        :isCropper="false"
                                        :pic="data.piclink"
                                        :isOneImg="true"
                    :files="fileList"></compressimgUpload>-->
                  </el-col>
                </el-form-item>

                <el-form-item label="是否显示">
                  <el-col :span="4">
                    <switchc v-model="data.show" @change="getIskeck" text="已开启|已关闭"></switchc>
                  </el-col>
                </el-form-item>
              </el-form>
            </div>
          </div>
          <div class="black">
            <div class="ueditor">
              <el-col :span="24">
                <!-- <ueditor :server-url="UEditorUrl" v-model="data.content" :z-index='21' ueditor-path='/ueditor/' :initial-frame-height='420' :auto-height-enabled='false' :options='config1'></ueditor> -->
                <!-- <editor class="editor"
                                :config="config"
                                v-model="data.content"
                                upload-url="/api/common/upload/index/"
                fileName="file" />-->
                <ue v-model="data.content" v-loading="loading1" v-if="!loading1" :value="data.content" upload-url="/api/common/upload/index/"
                  fileName="file" />
              </el-col>

              <div class="blank"></div>
            </div>
          </div>
          <div class="submit_button">
            <el-col :span="24" class="tc">
              <el-button :loading="$store.state.isLoading" type="primary" @click="subForm">保存</el-button>
            </el-col>
          </div>
          <!-- 小箭头 -->
          <i class="arrow arrow_out top150"></i>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import switchc from "@/components/currency/Swich";
  import HeadTitle from "@/components/currency/HeadTitle.vue";
  import uploadpic from "@/components/page/pic/up_pic";
  import ue from "@/components/currency/Ue/ue.vue";

  export default {
    data() {
      return {
        loading1: true,
        optionProps: {
          value: "id",
          label: "title",
          children: "z"
        },
        options: [{
          value: "",
          label: ""
        }],
        config: {
          qllink: false
        },
        data: {
          cate_id: "", //分类ID
          title: "", // 文章标题
          description: "",
          content: "",
          piclink: "",
          show: "1",
          author: "",
          editor: ""
        },
        fenlei: "请选择栏目",
        ca_id: "",
        newsFenLeis: "",
        selectedOptions: [],
        newsName: "",
        fileList: [],
        loading: true,
        formLabelWidth: "120"
      };
    },
    watch: {
      getNesFenLei(val) {
        this.options = val;
      },
      $route(to) {
        this.fianNewsFenLei();
      }
    },
    components: {
      switchc,
      HeadTitle,
      ue,
      uploadpic
    },

    methods: {
      onSuccess(pic) {
        this.data.piclink = pic;
      },
      handleItemChange(val) {
        var a = this.options.find(item => {
          //这里的chargingWorkNameList就是上面遍历的数据源
          return item.id === val;
          //筛选出匹配数据，是对应数据的整个对象
        });
        this.newsName = a.title;
      },
      subForm({
        obj
      }) {
        if (this.data.cate_id == "") {
          this.$fnc.alertError("添加失败!", "文章类别不能为空");
        } else if (this.data.title == "") {
          this.$fnc.alertError("添加失败!", "文章标题不能为空");
        } else if (this.$route.query.id == undefined) {
          this.addNews();
        } else {
          this.updataNews();
        }
      },
      addNews() {
        this.$api.getNews.addNews(this.data).then(res => {
          if (res.data.status == 1 && res.data.code == 200) {
            this.$fnc.alertSuccess({
              text: "添加成功",
              url: this.$router.back(-1)
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result);
          }
        });
      },
      updataNews() {
        this.data.id = this.$route.query.id;
        this.$api.getNews.updateNew(this.data).then(res => {
          if (res.data.status == 1 && res.data.code == 200) {
            this.$fnc.alertSuccess({
              text: "修改成功",
              url: this.$router.back(-1)
            });
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result);
          }
        });
      },
      fianNewsFenLei() {
        if (this.$route.query.id !== undefined) {
          var data = {
            id: this.$route.query.id
          };
          this.$api.getNews.selectNews(data).then(res => {
            if (res.data.code == 200 && res.data.status == 1) {
              this.$nextTick(() => {
                this.data = res.data.result;
                var params = {};
                params.id = res.data.result.cate_id;
                this.$api.getNewsFenlei
                  .findNewsFenLeiChildRen(params)
                  .then(res => {
                    this.selectedOptions = res.data.result.split("@");
                    this.newsName = this.selectedOptions[
                      this.selectedOptions.length - 1
                    ];
                    this.loading1 = false;
                  });
                if (this.data.editor == "" && this.$store.state.adminname) {
                  this.data.editor = this.$store.state.adminname;
                }
                if (this.data.author == "" && this.$store.state.adminTitle) {
                  this.data.author = this.$store.state.adminTitle;
                }
              });
            } else {
              this.$fnc.alertError(res.data.code_desc, res.data.result);
            }
          });
        } else {
          this.loading1 = false;
        }
      },
      getIskeck(val) {
        this.data.show = val;
      }
    },

    beforeCreate() {
      //数据未加载之前调用loading
      this.loading = true;
      this.$store.dispatch("getNewsCate");
    },
    created() {
      this.UEditorUrl = "";
      this.loading = false;
      this.fianNewsFenLei();
    },
    mounted() {
      if (this.data.editor == "" && this.$store.state.adminname) {
        this.data.editor = this.$store.state.adminname;
      }
      //author

      if (this.data.author == "" && this.$store.state.adminTitle) {
        this.data.author = this.$store.state.adminTitle;
      }
    },
    computed: {
      getNesFenLei() {
        return this.$store.state.newsFeiLei;
      },
      editor() {
        return this.$refs.myQuillEditor.quill;
      }
    }
  };
</script>

<style lang="less" scoped>
  td,
  th {
    padding: 5px 10px;
    border: 1px solid #ddd;
  }
</style>
